<template>
  <div>
    <table>
      <tr>
        <td>名称</td>
        <td>价格</td>
        <td>图片</td>
      </tr>
      <tr v-for="product in products" :key="product.id">
        <td>{{ product.name }}</td>
        <td>{{ product.price }}</td>
        <td>{{ product.image }}</td>
      </tr>
    </table>
    <button @click="sortOrder = 1">asc</button>
    <button @click="sortOrder = 2">desc</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //productShow: [],
      sortOrder: 0,
      products: [
        { id: 1, name: 'iphone', price: 1, image: 'http://www.baidu.com' },
        { id: 2, name: '台灯', price: 5, image: 'http://www.baidu.com' },
        { id: 3, name: '电脑', price: 4, image: 'http://www.baidu.com' },
        { id: 4, name: '笔', price: 2, image: 'http://www.baidu.com' },
        {
          id: 5,
          name: '钢铁、病毒、枪',
          price: 3,
          image: 'http://www.baidu.com',
        },
      ],
    }
  },
  watch: {
    sortOrder(newValue, oldValue) {
      console.log('sort变化', newValue, oldValue)
      if (newValue == 1) {
        this.products = this.products.sort((a, b) => a.price - b.price)
      }
      if (newValue == 2) {
        this.products = this.products.sort((a, b) => b.price - a.price)
      }
    },
  },
  computed: {
    name() {
      return this.data
    },
  },
  mounted() {
    // this.productShow = this.products
    console.log(1)
  },
}
</script>

<style lang="scss" scoped></style>
